<template>
  <div class="notice-bg">
    <!-- 顶部横幅 -->
    <div class="notice-banner">
      <i class="el-icon-bell"></i>
      <span>公告中心</span>
      <span class="banner-desc">网站最新动态与活动公告</span>
    </div>
    <div class="notice-content-layout">
      <!-- 公告卡片列表 -->
      <div class="notice-card-list">
        <div class="notice-list-header">
          <el-input v-model="params.name" placeholder="搜索公告标题" class="search-input" size="small"></el-input>
          <el-button type="primary" icon="el-icon-search" size="small" @click="findBySearch">查询</el-button>
          <el-button size="small" @click="reset">重置</el-button>
          <el-button type="success" icon="el-icon-plus" size="small" v-if="user.role === 'ROLE_ADMIN'" @click="add">新增</el-button>
        </div>
        <el-scrollbar class="notice-card-scroll">
          <el-card
            v-for="item in tableData"
            :key="item.id"
            :class="['notice-card-item', selectedNotice && selectedNotice.id === item.id ? 'active' : '']"
            shadow="hover"
            @click.native="selectNotice(item)"
          >
            <div class="notice-card-title">
              <i class="el-icon-bell"></i>
              {{ item.name }}
            </div>
            <div class="notice-card-time">{{ item.time }}</div>
            <div class="notice-card-content">{{ item.content | short }}</div>
          </el-card>
        </el-scrollbar>
        <el-pagination
          class="notice-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[5,10,15,20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
      <!-- 公告详情弹窗 -->
      <el-dialog
        title="公告详情"
        :visible.sync="detailDialogVisible"
        width="480px"
        top="8vh"
        :close-on-click-modal="true"
        v-if="selectedNotice"
        class="notice-detail-dialog"
      >
        <div class="notice-detail-title">
          <i class="el-icon-bell"></i>
          {{ selectedNotice.name }}
        </div>
        <div class="notice-detail-time">{{ selectedNotice.time }}</div>
        <el-divider></el-divider>
        <div class="notice-detail-content">
          {{ selectedNotice.content }}
        </div>
        <div v-if="user.role === 'ROLE_ADMIN'" class="notice-detail-actions">
          <el-button size="mini" type="primary" @click="edit(selectedNotice)">编辑</el-button>
          <el-button size="mini" type="danger" @click="del(selectedNotice.id)">删除</el-button>
        </div>
      </el-dialog>
      <!-- 新增/编辑弹窗 -->
      <el-dialog title="公告信息" :visible.sync="dialogFormVisible" width="420px">
        <el-form :model="form" label-width="80px">
          <el-form-item label="公告标题">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="公告内容">
            <el-input type="textarea" v-model="form.content" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      params: {
        name: '',
        phone: '',
        pageNum: 1,
        pageSize: 8,
      },
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      form: {},
      user: localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {},
      selectedNotice: null,
      detailDialogVisible: false,
    }
  },
  created() {
    this.findBySearch()
  },
  methods: {
    findBySearch(){
      request.get("/notice/search", {
        params: this.params
      }).then(res =>{
        if(res.code === '0'){
          this.tableData = res.data.list
          this.total = res.data.total;
          if (this.tableData.length > 0) {
            this.selectedNotice = this.tableData[0];
          } else {
            this.selectedNotice = null;
          }
        }
      })
    },
    del(id){
      this.$confirm('确定要删除该公告吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete("/notice/" + id).then(res => {
          if (res.code === "0") {
            this.$message.success("删除成功");
            this.findBySearch();
            this.detailDialogVisible = false;
          } else {
            this.$message.error(res.msg);
          }
        })
      });
    },
    add(){
      this.form = {};
      this.dialogFormVisible = true
    },
    edit(obj){
      this.form = Object.assign({}, obj);
      this.dialogFormVisible = true
    },
    reset(){
      this.params = {
        name: '',
        phone: '',
        pageNum: 1,
        pageSize: 8,
      }
      this.findBySearch();
    },
    handleSizeChange(pageSize){
      this.params.pageSize = pageSize;
      this.findBySearch();
    },
    handleCurrentChange(pageNum){
      this.params.pageNum = pageNum;
      this.findBySearch();
    },
    submit(){
      request.post("/notice", this.form).then(res =>{
        if(res.code === "0"){
          this.$message.success("操作成功");
          this.dialogFormVisible = false;
          this.findBySearch();
        }
      })
    },
    selectNotice(item) {
      this.selectedNotice = item;
      this.detailDialogVisible = true;
    }
  },
  filters: {
    short(val) {
      if (!val) return '';
      return val.length > 40 ? val.slice(0, 40) + '...' : val;
    }
  }
}
</script>

<style scoped>
.notice-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #232f3e 0%, #409EFF 100%);
  padding-bottom: 60px;
}
.notice-banner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 32px auto;
  padding: 38px 0 18px 0;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 32px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 4px 24px #232f3e, 0 1px 0 #409EFF;
  border-bottom: 1.5px solid #409EFF;
  position: relative;
}
.banner-desc {
  font-size: 16px;
  color: #ffd04b;
  font-weight: 400;
  margin-left: 24px;
  letter-spacing: 1px;
  opacity: 0.92;
}
.notice-content-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 38px;
  max-width: 1200px;
  margin: 0 auto;
}
.notice-card-list {
  width: 420px;
  min-width: 260px;
  background: rgba(255,255,255,0.98);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.09);
  padding: 18px 18px 0 18px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.notice-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.search-input {
  width: 120px;
}
.notice-card-scroll {
  flex: 1;
  min-height: 320px;
  max-height: 60vh;
  overflow-y: auto;
  padding-bottom: 8px;
}
.notice-card-item {
  margin-bottom: 14px;
  border-radius: 12px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border 0.2s, box-shadow 0.2s;
  background: #f9fafb;
}
.notice-card-item.active, .notice-card-item:hover {
  border: 1.5px solid #409EFF;
  box-shadow: 0 2px 12px #e6e6e6;
  background: #f0f7ff;
}
.notice-card-title {
  font-size: 17px;
  color: #409EFF;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.notice-card-time {
  font-size: 13px;
  color: #aaa;
  margin-bottom: 6px;
}
.notice-card-content {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  word-break: break-all;
}
.notice-pagination {
  padding: 10px 0 10px 0;
  text-align: center;
  background: transparent;
  border-top: none;
}
.notice-detail-dialog >>> .el-dialog__header {
  background: #232f3e;
  color: #fff;
  border-radius: 18px 18px 0 0;
}
.notice-detail-dialog >>> .el-dialog__title {
  color: #fff;
  font-size: 20px;
}
.notice-detail-title {
  font-size: 22px;
  color: #232f3e;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.notice-detail-time {
  font-size: 14px;
  color: #888;
  margin-bottom: 12px;
}
.notice-detail-content {
  font-size: 16px;
  color: #444;
  line-height: 1.8;
  margin-top: 8px;
  word-break: break-all;
}
.notice-detail-actions {
  margin-top: 18px;
  display: flex;
  gap: 8px;
}
@media (max-width: 900px) {
  .notice-banner {
    font-size: 20px;
    padding: 18px 0 10px 0;
    gap: 8px;
  }
  .banner-desc {
    font-size: 12px;
    margin-left: 8px;
  }
  .notice-content-layout {
    flex-direction: column;
    gap: 18px;
    max-width: 100vw;
    padding: 0 2vw;
  }
  .notice-card-list {
    width: 100%;
    min-width: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 8px 2vw 0 2vw;
  }
  .notice-card-scroll {
    min-height: 180px;
    max-height: 40vh;
  }
}
</style>